<template>
  <div
    class="vk-dropdown"
  >
  <Tooltip
    :placement="placement"
    :trigger="trigger"
    :popper-options="popperOptions"
    :open-delay="openDelay"
    :close-delay="closeDelay"
    @visible-change='visibleChange'
    ref="tooltipRef"
    >
    <!-- 触发区（标题） -->
    <slot></slot>
    <!-- 展示区 (菜单）-->
    <template #content>
       <ul class="vk-dropdown__menu"> 
         <template v-for="item in menuOptions" :key="item.key">
           <li
            v-if="item.divided"
            role="separator"
            class="divided-placeholder"
           />
           <li 
            class="vk-dropdown__item"
            @click="$event=>itemClick(item)"
            :class="{'is-disabled':item.disabled,'is-divided':item.divided}"
            :id ="`dropdown-item-${item.key}`"
           >
             <RenderVnode :vNode="item.label"/>
           </li>
         </template>
       </ul>
    </template>
  </Tooltip>

  </div>
</template>




<script setup lang="ts">
import RenderVnode from '../Common/RenderVnode';
import {ref} from 'vue'
import type {Ref} from 'vue'
import type {DropdownProps,DropdownInstance,DropdownEmits, MenuOptions } from './types';
import Tooltip from '../Tooltip/TooltipMain.vue';
import type {TooltipInstance } from '../Tooltip/types';
defineOptions({
  name:'VkDropdown'
})
const props = withDefaults(defineProps<DropdownProps>(),{hideAfterClick:true})
const emits = defineEmits<DropdownEmits>();
const tooltipRef = ref() as Ref<TooltipInstance>
// 可见性发生变化，通知父组件做相应的处理
const visibleChange=(e:boolean)=>{
  emits('visible-change',e);
}
const itemClick=(e:MenuOptions)=>{
  if(e.disabled){
    return
  }
  emits('select',e)
  if(props.hideAfterClick){
    tooltipRef.value.hide()
  }
}
//调用的是tooltip上的两个方法show和hide
defineExpose<DropdownInstance>({
  show:tooltipRef.value?.show,
  hide:tooltipRef.value?.hide

})
</script>